<template>
	<div class="home-page w-full h-full">
		<el-carousel trigger="click" height="230px">
			<el-carousel-item v-for="item in topList" :key="item._id">
				<nuxt-link :to="`/details/${item._id}`">
					<div
						class="w-full h-full bg-center bg-cover bg-no-repeat relative"
						:style="{ backgroundImage: `url(${item.cover})` }">
						<div
							class="title absolute bottom-0 left-0 w-full h-fit pb-5 pt-2 flex items-center justify-center text-white text-xl font-bold backdrop-blur-sm">
							<p>{{ item.title }}</p>
						</div>
					</div>
				</nuxt-link>
			</el-carousel-item>
		</el-carousel>
		<!-- 搜索 -->
		<div class="search mt-2">
			<el-input v-model="keyword" placeholder="请输入搜索关键词" @keydown.enter="getListData">
				<template #append>
					<el-button icon="Search" @click="getListData" />
				</template>
			</el-input>
		</div>
		<!-- 分类列表 -->
		<div class="category-list w-full flex mt-2 rounded-xs flex-wrap">
			<div class="c-item m-1 rounded-sm cursor-pointer">
				<el-tag
					type="primary"
					:effect="currentCategory === '' ? 'dark' : 'light'"
					@click="currentCategory = ''">
					全部
				</el-tag>
				<el-tag
					class="m-2"
					type="primary"
					v-for="item in categoryList"
					:key="item._id"
					:effect="currentCategory === item._id ? 'dark' : 'light'"
					@click="currentCategory = item._id">
					{{ item.name }}
				</el-tag>
			</div>
		</div>
		<section class="mt-1">
			<div class="note-item my-3" v-for="item in articles" :key="item._id">
				<note-card
					:id="item._id"
					:cover="item.cover"
					:title="item.title"
					:date="item.createdAt"
					:content="item.content" />
			</div>
			<el-scrollbar class="w-full flex items-center justify-center">
				<ElsPagination
					:total="total"
					:pageSize="pageSize"
					:currentPage="currentPage"
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange" />
			</el-scrollbar>
		</section>
	</div>
</template>

<script name="HomePage" lang="ts" setup>
import type { IArticle } from '~/server/models/article.model';
import type { ICategory } from '~/server/models/category.model';

// 分页
const total = ref<number>(0);
const pageSize = ref<number>(20);
const currentPage = ref<number>(1);
const handleCurrentChange = (page: number) => {
	currentPage.value = page;
	getListData();
};
const handleSizeChange = (size: number) => {
	pageSize.value = size;
	getListData();
};

// 当前选中的分类
const currentCategory = ref<string>('');
watch(currentCategory, async (): Promise<void> => {
	await getListData();
});

// 获取文章列表
const keyword = ref<string>('');
const articles = ref<IArticle[]>([]);
const getListData = async (): Promise<void> => {
	const res = await $fetch('/api/client/article/list', {
		query: {
			pageSize: pageSize.value,
			currentPage: currentPage.value,
			category: currentCategory.value,
			keyword: keyword.value,
		},
	});
	if (res.code === 1) {
		articles.value = res.data.list;
		total.value = res.data.total;
	} else {
		ElMessage.error(res.message);
	}
};
getListData();

// 获取置顶文章列表
const topList = ref<IArticle[]>([]);
const topListRes: any = await $fetch('/api/client/article/topList');
if (topListRes.code === 1) {
	topList.value = topListRes.data.list;
} else {
	ElMessage.error(topListRes.message);
}

// 获取分类列表
const categoryList = ref<ICategory[]>([]);
const categoryRes: any = await $fetch('/api/client/category/list');
if (categoryRes.code === 1) {
	categoryList.value = categoryRes.data.list;
} else {
	ElMessage.error(categoryRes.message);
}

onMounted(() => {
	topList.value = topList.value.map((item) => {
		return {
			...item,
			cover: location.origin + item.cover,
		};
	});
});
</script>
